<script setup lang="ts">
import { ref } from 'vue';

const props: any = defineProps<{
    ujt?: any;
    asaidata: any;
    formdata: any;
    formkey: any;
}>();

const { $fn, $global } = props.ujt;

const rfInputFile: any = ref(null);
const selectedFile: any = ref(null);
const message: any = ref('+');

const handleUploadFile = async (e: any) => {
    if (rfInputFile.value.value) {
        selectedFile.value = e.target.files[0];
        rfInputFile.value.value = '';
        if (!selectedFile.value) {
            message.value = $fn.lg('asai.fail');
            return;
        }
        const reader: any = new FileReader();
        reader.onload = async () => {
            try {
                upLoad({
                    base64Data: reader.result,
                    asaidata: props.asaidata,
                    formdata: props.formdata,
                    formkey: props.formkey,
                    fn: (val: any) => {
                        props.formdata[props.formkey] = val;
                        $global.pop['popupload'].stat = 0;
                    },
                });
                // props.formdata[props.formkey] = reader.result;
                message.value = '';
            } catch (error: any) {
                message.value = $fn.lg('asai.fail') + ' ' + error.message;
            }
        };
        reader.readAsDataURL(selectedFile.value);
    }
};
function clickUpload() {
    rfInputFile.value.click();
}

function upLoad(params: any) {
    $global.pop['popupload'].stat = 1;
    $global.pop['popupload'].tit = $fn.lg('asai.upload');
    $global.pop['popupload'].params = params;
}
</script>

<template>
    <AsaiUploadImgCutPop :ujt="ujt"></AsaiUploadImgCutPop>
    <AsaiFormLabel
        :ujt="ujt"
        :asaidata="asaidata"
        :formdata="formdata"
        :formkey="formkey"
    >
        <div class="as-upload-image" @pointerdown.prevent="clickUpload">
            <div v-if="props.formdata[formkey]">
                <img :src="props.formdata[formkey]" />
            </div>
            <div
                v-else
                :class="message === '+' ? '' : 'as-upload-tit'"
                :title="message"
            >
                {{ message }}
            </div>
        </div>
        <input
            accept="image/*"
            ref="rfInputFile"
            type="file"
            hidden
            @change="handleUploadFile"
        />
    </AsaiFormLabel>
</template>

<style scoped lang="scss">
.as-upload-image {
    width: 88px;
    height: 88px;
    border: 1px solid #ccc;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 58px;
    color: #ccc;
    cursor: pointer;
    border-radius: 4px;

    img,
    div {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        max-width: 80px;
        max-height: 80px;
    }

    .as-upload-tit {
        font-size: 18px;
        color: #666;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
}
</style>
